是的，你沒有看錯。現在就開始你人生第一段的 JavaScript 程式碼。
只是在開始寫之前，你必須先了解一下 JS 的建置方式：
JS 要放在哪？
1.放在 <head> 和 </head>之間：
2.放在 HTML 最後面， </body> 結尾標籤之前：(此方式最推薦)
在前一個章節就提過 考試會考 的內容：
瀏覽器讀取 HTML 的順序是由上而下讀取，當讀到 <script> 標籤或 JS 檔案時，網頁渲染會暫停，這時瀏覽器會先把 JS 腳本先執行完，再渲染後面的內容。所以 JS 腳本或檔案要放在 HTML 的最後 </body> 結束標籤之前，才不會導致頁面被中斷讀取過久而影響使用者體驗。
而一個 HTML 裡面可以同時存在很多個 JS 或 JQ 腳本，所以優化瀏覽器最有效率的寫法，當然是把 JS、JQ 腳本或引用的檔案，放在 HTML 最後面 </body> 結尾標籤之前囉。
JS 怎麼寫？
1.直接內嵌在 HTML 文件中：
把 JS 程式碼寫在 <script> 和 </script> 標籤裡面
舊版 HTML 寫法：
必須在 <script> 標籤內指定 type 屬性，且規定腳本的 MIME 類型為 text/javascript
<script type="text/javascript">
var a = 5;
console.log(a);
</script>
新版 HTML5 寫法：
<script> 會自動執行並忽略 type 屬性，不需要再多寫 MIME 類型。
<script>
var a = 5;
console.log(a);
</script>
2.引入外部 JS 命令稿(此方法最推薦)
把 JS 程式碼寫在獨立檔案，以絕對路徑讀取檔案，供 HTML 引入執行。
<script src="js/xxxxx.js"></script>或是一些含有 JS 或 jQuery(以下簡稱 JQ) 特效的官方 CDN 等，才需要用外部連結引入，如：
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
4.HTML 標籤內的嵌入式寫法。(此方法最不推薦！)
早期網頁還沒出現 jQuery 之前，在 HTML 標籤內混寫 JS 語法是當時傳統的做法，你也許見過下面的寫法：
<input type="text" name="date" onchange="validateDate()">
或
<div onclick="window.open('test.html','_self');" class="btn"></div>
將 JS 嵌入 HTML 標籤裡使用，會導致網站原始碼不易閱讀及維護，原因是 HTML 標籤通常是描述檔案的排版結構，而非網頁操作的程式行為。而「非侵入式 JavaScript」方案，則是以程式碼另外獨立撰寫其需要對應的事件，而不是和網頁元素內嵌在一起。在 JS 腳本事件中的相關元素，在 HTML 標籤中則改用簡單的屬性參數，如：用 id屬性、 class名稱 或 value值等，作為程式碼回應的參數進行執行需要的設定，尤其對網頁內擁有許多相同功能需要傳輸或設定，更是方便許多。
如果把上面範例第一行的 <input> 語法，改為非侵入式寫法，整句話的語意會更加清晰。
<input type="text" name="date" id="date">
<script>
window.addEventListener('DOMContentLoaded',function(event){
document.getElementById('date').addEventListener('change',validateDate);
});
</script>
註：<input> 內的 id 元素就是 JS 腳本事件中對應的參數。
(現在語法看不懂沒關係，主要是讓 HTML 和 JS 分開撰寫，以明確解析標籤的功能用法。)
上述 4 種方式各有其用處，除非 JS 程式碼量很短，否則利用外部引入的方式，不僅易於維護，也可在重覆瀏覽時用快取節省網頁載入時間，還更利於維護與修改。若頁面同時存在 JS 和 JQ 檔案，則需要分開引入，以免造成維護上的困難。
以上就是輕鬆學習 JavaScript 的建置方法，接下來就開始教你怎麼寫 JS 吧！
首先打開你的網頁編輯器，如：VS Code、Sublime Text、Atom、Notepad...都可。如果都沒有，可以使用線上編輯器，個人還蠻推薦 CodePen 或 JSBin，畢竟畫面功能直覺，且預覽速度又快，而且 CodePen 免費會員還有存檔功能，及各種大神的作品可以參考。
1.打開 CodePen 之後，不需登入一樣可以使用，請點擊左上方的「Start Coding」按鈕
2.接下來出現有「HTML、CSS、JS」這3個編輯窗格，和一個大大的「預覽」窗格。
如果你的欄位編排方式和我的長得不一樣也沒差，畢竟這是個人喜好。如果想跟我一樣，請按右上方的「Change View」更改你喜歡的編輯方式，滑出一組三選一欄位，請改為中間那個。
3.然後請在右上角的「JS」窗格內寫下以下程式碼。
alert("這是我的第一個 JavaScript");
4.滑鼠游標點擊下方的「預覽」窗格，1-2秒後就可以看到畫面上方跳出一個小視窗，內容寫著：「這是我的第一個 JavaScript」
然後...你就完成了你人生中第一支的 JavaScript了。
如果你是用自己的編輯器，以 VS Code 為例，方法如下：
1.打開 VS Code，點擊 File (檔案) -> New File (新增檔案)。
2.接下來要把從無法辨識的文件改成 html。請在圖的最下排藍色功能列(圖寫1)上，點擊「Plain Text 純文字」，圖上方跳出搜尋列(圖寫2)打上「html」，然後按 Enter 鍵
3.接著在文件內容打上半形的「!」，按 Enter 鍵
4.出現 html5 的標準結構之後，在 <body> 和 </body>之間打入下方程式碼：
<script>
alert("這是我的第一個 JavaScript");
</script>
如圖：
5.接著點擊 File (檔案) -> Save (儲存)，隨便取個 test.html。
6.接著從檔案總管直接雙擊剛儲存的檔案，它便會使用你電腦預設的瀏覽器開啟，這裡以 Google Chrome 瀏覽器為例。你可以看到網頁上方出現一個彈跳視窗，寫著「這是我的第一個 JavaScript」，這樣就完成了。
What？！！！
沒錯，JavaScript 的入門門檻就這麼低，剩下就是要詳加了解它的語法和邏輯運用而已。
其實它還能以很多種不同的方式來顯示，以下再介紹幾個初學者最常使用的簡易寫法：
1.用 innerHTML() 寫入 HTML 元素
innerHTML 是 W3C 規定的標準寫法，主要是用來取得 HTML 元素或寫入字串到 HTML 的語法，它還有個特性，就是會覆蓋原本寫的內容。另外，它還可以搭配 Element Object 來執行，如語法 getElementById() (取得 id值 )或 getElementsByName() (取得 name值 )等，這也是多數人常用來使用網頁互動特效的方法之一，而且幾乎所有主流的瀏覽器都支援此功能。寫法如下：
<div id="Num"></div>
<script>
document.getElementById('Num').innerHTML = 5;
//JS翻譯：把數字 5 寫入到 HTML 標籤內含有 id 叫做 Num 的地方
</script>
你可以使用 CodePen 測試看看，把上方的程式碼，複製貼到 CodePen 左上角的 「HTML」 欄位內，下方的預覽窗格就會出現 5 的數字。
2.用 console.log() 寫入瀏覽器控制台。(最多人用這個 Debug 偵錯)
幾乎各家瀏覽器都有 console 控制台(或稱「主控台」)的功能，大多都是按 F12，或是在瀏覽器的網頁內容按右鍵，選擇「檢查」或「檢查原始碼」就可以開啟「開發者工具」這個神奇的介面，不管是基礎或資深開發者都需要使用這個無敵好用的偵錯功能。
1.以 Chrome 瀏覽器為例，按 F12，開啟「開發者工具」介面，點擊左上方的「Console」
3.在上圖「Console 控制台」內，看到一個正在閃爍的游標，這時在游標處打入下方程式碼：
console.log(5 + 2);
然後按 Enter 鍵，則會看到下方會自動輸出數字 7。
然後我們又完成了二種寫 JS 的方法了。
以上就是 JavaScript 的超入門建置方式，接下來就是開始進入基本概念和語法囉。
參考資料：
上一篇：【JS幼幼班】Step.01 學習，從「不要害怕」開始
下一篇：【JS幼幼班】Step.03 JavaScript 的基本概念
